<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏调试页面</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            padding-top: 100px;
            font-family: Arial, sans-serif;
            background: #f5f5f5;
        }
        .debug-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }
        .debug-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .debug-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin: 15px 0;
        }
        .debug-btn {
            background: #28a745;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
        }
        .debug-btn:hover {
            background: #218838;
        }
        .debug-btn.test {
            background: #007cba;
        }
        .debug-btn.test:hover {
            background: #005a87;
        }
        .status-display {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            margin: 10px 0;
            font-family: monospace;
            font-size: 14px;
            white-space: pre-wrap;
        }
        .nav-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 20px;
        }
        .info-box {
            background: #e9ecef;
            padding: 15px;
            border-radius: 4px;
        }
        .info-box h4 {
            margin: 0 0 10px 0;
            color: #495057;
        }
        .highlight {
            background: #fff3cd !important;
            border: 2px solid #ffc107 !important;
        }
    </style>
</head>
<body>
    <!-- 导航栏组件容器 -->
    <div id="navbar-container"></div>
    
    <div class="debug-container">
        <h1>🔍 导航栏高亮调试工具</h1>
        
        <div class="debug-section">
            <h2>📊 当前状态检查</h2>
            <div class="debug-buttons">
                <button class="debug-btn" onclick="checkCurrentState()">检查当前状态</button>
                <button class="debug-btn" onclick="listAllNavLinks()">列出所有导航链接</button>
                <button class="debug-btn" onclick="checkComponentStatus()">检查组件状态</button>
                <button class="debug-btn" onclick="clearAllActive()">清除所有高亮</button>
            </div>
            <div id="status-display" class="status-display">点击上方按钮开始调试...</div>
        </div>
        
        <div class="debug-section">
            <h2>🎯 测试页面高亮</h2>
            <p>测试不同页面的高亮效果：</p>
            <div class="debug-buttons">
                <button class="debug-btn test" onclick="testPageHighlight('index.html')">首页 (index.html)</button>
                <button class="debug-btn test" onclick="testPageHighlight('about.html')">认识非遗 (about.html)</button>
                <button class="debug-btn test" onclick="testPageHighlight('explore.html')">走近非遗 (explore.html)</button>
                <button class="debug-btn test" onclick="testPageHighlight('heritage.html')">传习非遗 (heritage.html)</button>
                <button class="debug-btn test" onclick="testPageHighlight('profile.html')">个人中心 (profile.html)</button>
            </div>
        </div>
        
        <div class="debug-section">
            <h2>🔧 测试页面ID</h2>
            <p>直接使用页面ID测试：</p>
            <div class="debug-buttons">
                <button class="debug-btn test" onclick="testPageId('home')">home</button>
                <button class="debug-btn test" onclick="testPageId('about')">about</button>
                <button class="debug-btn test" onclick="testPageId('explore')">explore</button>
                <button class="debug-btn test" onclick="testPageId('heritage')">heritage</button>
                <button class="debug-btn test" onclick="testPageId('profile')">profile</button>
            </div>
        </div>
        
        <div class="nav-info">
            <div class="info-box">
                <h4>📋 页面映射关系</h4>
                <div style="font-family: monospace; font-size: 12px;">
                    index.html → home<br>
                    about.html → about<br>
                    explore.html → explore<br>
                    heritage.html → heritage<br>
                    longzhou.html → heritage<br>
                    profile.html → profile
                </div>
            </div>
            <div class="info-box">
                <h4>🎛️ 调试命令</h4>
                <div style="font-family: monospace; font-size: 12px;">
                    setActiveNavPage('index.html')<br>
                    setActiveNavPage('about')<br>
                    navbarManager.getInstance()<br>
                    document.querySelectorAll('.nav-link')
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript脚本 -->
    <script src="scripts/navbar-component.js"></script>
    <script>
        // 初始化导航栏
        initNavbar();
        
        let debugLog = '';
        
        function log(message) {
            const timestamp = new Date().toLocaleTimeString();
            debugLog += `[${timestamp}] ${message}\n`;
            document.getElementById('status-display').textContent = debugLog;
            console.log(message);
        }
        
        function clearLog() {
            debugLog = '';
            document.getElementById('status-display').textContent = '日志已清空...\n';
        }
        
        function checkCurrentState() {
            clearLog();
            
            const activeLinks = document.querySelectorAll('.nav-link.active');
            const allLinks = document.querySelectorAll('.nav-link');
            const instance = navbarManager.getInstance();
            
            log(`=== 当前状态检查 ===`);
            log(`总导航链接数: ${allLinks.length}`);
            log(`活动链接数: ${activeLinks.length}`);
            log(`组件实例存在: ${!!instance}`);
            log(`组件已初始化: ${instance ? instance.isInitialized : 'N/A'}`);
            
            if (activeLinks.length > 0) {
                activeLinks.forEach((link, index) => {
                    log(`活动链接 ${index + 1}: ${link.textContent} (${link.href})`);
                });
            } else {
                log('没有活动的导航链接');
            }
        }
        
        function listAllNavLinks() {
            clearLog();
            
            const allLinks = document.querySelectorAll('.nav-link');
            log(`=== 所有导航链接 ===`);
            
            allLinks.forEach((link, index) => {
                const isActive = link.classList.contains('active');
                const href = link.getAttribute('href');
                const text = link.textContent;
                log(`${index + 1}. ${text} → ${href} ${isActive ? '[活动]' : ''}`);
            });
        }
        
        function checkComponentStatus() {
            clearLog();
            
            const instance = navbarManager.getInstance();
            log(`=== 组件状态检查 ===`);
            
            if (instance) {
                log(`组件已创建: ✓`);
                log(`组件已初始化: ${instance.isInitialized ? '✓' : '✗'}`);
                log(`当前配置的活动页面: ${instance.config.activePage}`);
                log(`菜单项数量: ${instance.config.menuItems.length}`);
                
                instance.config.menuItems.forEach((item, index) => {
                    log(`  ${index + 1}. ${item.name} (${item.id}) → ${item.link}`);
                });
            } else {
                log(`组件实例不存在: ✗`);
            }
        }
        
        function clearAllActive() {
            clearLog();
            
            const activeLinks = document.querySelectorAll('.nav-link.active');
            log(`=== 清除所有高亮 ===`);
            log(`清除前活动链接数: ${activeLinks.length}`);
            
            activeLinks.forEach(link => {
                link.classList.remove('active');
            });
            
            const remainingActive = document.querySelectorAll('.nav-link.active');
            log(`清除后活动链接数: ${remainingActive.length}`);
        }
        
        function testPageHighlight(filename) {
            clearLog();
            
            log(`=== 测试页面高亮: ${filename} ===`);
            log(`调用 setActiveNavPage('${filename}')`);
            
            const startTime = Date.now();
            
            try {
                setActiveNavPage(filename);
                
                setTimeout(() => {
                    const endTime = Date.now();
                    const activeLinks = document.querySelectorAll('.nav-link.active');
                    
                    log(`执行耗时: ${endTime - startTime}ms`);
                    log(`结果活动链接数: ${activeLinks.length}`);
                    
                    if (activeLinks.length === 1) {
                        const activeLink = activeLinks[0];
                        log(`✓ 成功: ${activeLink.textContent} (${activeLink.href})`);
                        
                        // 高亮显示活动链接
                        activeLinks.forEach(link => {
                            link.parentElement.classList.add('highlight');
                            setTimeout(() => {
                                link.parentElement.classList.remove('highlight');
                            }, 2000);
                        });
                    } else if (activeLinks.length === 0) {
                        log(`✗ 失败: 没有链接被激活`);
                    } else {
                        log(`✗ 错误: 多个链接被激活`);
                        activeLinks.forEach((link, index) => {
                            log(`  ${index + 1}. ${link.textContent}`);
                        });
                    }
                }, 100);
                
            } catch (error) {
                log(`✗ 异常: ${error.message}`);
            }
        }
        
        function testPageId(pageId) {
            clearLog();
            
            log(`=== 测试页面ID: ${pageId} ===`);
            log(`调用 setActiveNavPage('${pageId}')`);
            
            const startTime = Date.now();
            
            try {
                setActiveNavPage(pageId);
                
                setTimeout(() => {
                    const endTime = Date.now();
                    const activeLinks = document.querySelectorAll('.nav-link.active');
                    
                    log(`执行耗时: ${endTime - startTime}ms`);
                    log(`结果活动链接数: ${activeLinks.length}`);
                    
                    if (activeLinks.length === 1) {
                        const activeLink = activeLinks[0];
                        log(`✓ 成功: ${activeLink.textContent} (${activeLink.href})`);
                    } else {
                        log(`✗ 失败: 预期1个活动链接，实际${activeLinks.length}个`);
                    }
                }, 100);
                
            } catch (error) {
                log(`✗ 异常: ${error.message}`);
            }
        }
        
        // 页面加载完成后自动检查
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(() => {
                log('=== 页面加载完成自动检查 ===');
                checkCurrentState();
            }, 1000);
        });
    </script>
</body>
</html> 